<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  
    <meta name="keywords" content="前端,Vue.js,JavaScript,Node.js,小程序">
  
  
    <meta name="description" content="GuoYou.Li(李国有)的博客, 用于做学习过程中的笔记、总结以及知识分享">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    vue-router 设置为 history, 刷新报错404的解决办法- 配置 nginx |
    
    种子的信仰</title>
  
    <link rel="shortcut icon" href="/your/favicon.ico">
  
  
<link rel="stylesheet" href="/your/css/style.css">

  
    
<link rel="stylesheet" href="/your/fancybox/jquery.fancybox.min.css">

  
  
<script src="/your/js/pace.min.js"></script>

<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/your/atom.xml" title="种子的信仰" type="application/atom+xml">
</head>

<body>
<main class="content">
  <section class="outer">
  <article id="post-vue-router-history-nginx-setting" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

    <div class="article-inner">
        
            <header class="article-header">
                
  
    <h1 class="article-title" itemprop="name">
      vue-router 设置为 history, 刷新报错404的解决办法- 配置 nginx
    </h1>
  
  




            </header>
            

                
                    <div class="article-meta">
                        <a href="/your/2021/09/08/vue-router-history-nginx-setting/" class="article-date">
  <time datetime="2021-09-08T14:54:23.000Z" itemprop="datePublished">2021-09-08</time>
</a>
                            
                    </div>
                    

                        
                            
    <div class="tocbot"></div>





                                

                                    <div class="article-entry" itemprop="articleBody">
                                        


                                            

                                                
                                                                    <h2 id="一-问题描述"><a href="#一-问题描述" class="headerlink" title="一.问题描述"></a>一.问题描述</h2><p><code>vue-router</code> 默认 <code>hash</code> 模式, 但是链接上带有一个 <code>#</code> 号, 在某些情况下需要设置为 <code>history</code> 模式, 但是会出现打包上线之后访问页面正常, 跳转页面后刷新后会报错显示 404, </p>
<p>从<a href="https://router.vuejs.org/zh/guide/essentials/history-mode.html" target="_blank" rel="noopener">官网的介绍</a>就可以看到需要配置 <code>nginx</code> 代理才能解决这个问题. </p>
<h2 id="二-在-windows-本地模拟部署项目"><a href="#二-在-windows-本地模拟部署项目" class="headerlink" title="二.在 windows 本地模拟部署项目"></a>二.在 windows 本地模拟部署项目</h2><p><strong>1.下载之后解压到桌面, 不用双击 <code>nginx.exe</code>,</strong></p>
<p><a href="http://nginx.org/en/download.html" target="_blank" rel="noopener">windows 平台的 <code>ngxin</code>下载地址</a></p>
<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/image-20210908231012224.png" alt="下载地址"></p>
<p><strong>2.启动 <code>nginx</code></strong></p>
<p>基本命令介绍</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 启动nginx</span></span><br><span class="line">start nginx</span><br><span class="line"></span><br><span class="line"><span class="comment"># 修改配置后重启nginx</span></span><br><span class="line">./nginx -s reload</span><br><span class="line"></span><br><span class="line"><span class="comment"># 快速停止nginx</span></span><br><span class="line">./nginx -s stop</span><br><span class="line"></span><br><span class="line"><span class="comment"># 完整有序的停止nginx</span></span><br><span class="line">./nginx -s quit</span><br></pre></td></tr></table></figure>

<p> 在文件夹中打开命令终端: 输入 <code>start nginx</code> 启动 <code>nginx</code> 服务, 然后浏览器中打开: <code>http://localhost</code></p>
<p><strong>(如果你的 <code>IIS</code> 是启动的状态, 需要先关闭它, 不然 <code>IIS</code> 占用了80端口, <code>nginx</code> 服务会启动失败)</strong></p>
<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/image-20210908232438968.png" alt="start nginx"></p>
<p><code>nginx</code> 启动成功界面:</p>
<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/image-20210908233000813.png" alt="nginx 启动成功"></p>
<p><strong>3.打包项目-部署项目</strong></p>
<ul>
<li><p>执行 <code>yarn build</code>, 把打包后的文件夹 <code>dist</code> 复制到桌面, </p>
</li>
<li><p>然后在打开配置文件 <code>conf</code> 配置项目目录,</p>
</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">location / &#123;</span><br><span class="line">	root   /Users/guoyo/Desktop/dist; <span class="comment"># 这里是项目地址</span></span><br><span class="line">	index  index.html index.htm;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/Snipaste_2021-09-08_23-37-24.png" alt="部署项目"></p>
<ul>
<li>重启 <code>nginx</code></li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">./nginx -s reload</span><br></pre></td></tr></table></figure>



<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/image-20210908234325665.png" alt="重启 nginx"></p>
<ul>
<li>刷新浏览器, 项目部署成功</li>
</ul>
<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/image-20210908234416184.png" alt="项目部署成功"></p>
<h2 id="三-解决刷新404的问题"><a href="#三-解决刷新404的问题" class="headerlink" title="三.解决刷新404的问题"></a>三.解决刷新404的问题</h2><p>上面的项目已经部署成功了, 我们可以换成 <code>IP</code> 访问, 显得更像一个已上线的项目, 也可以配置域名映射更像!<img src="https://gitee.com/liguoyou/pic/raw/master/images/image-20210908234740487.png" alt="IP访问"></p>
<p>但是这个时候, 当你跳转到其他页面然后刷新页面, 就会出现 404 !!</p>
<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/image-20210908235046402.png" alt="404"></p>
<p>很简单, 这时候只需要把 <code>nginx</code> 的配置文件加上<code>try_files $uri $uri/ /index.html;</code>, 然后重启 <code>nginx</code> 即可</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">location / &#123;</span><br><span class="line">	root   /Users/guoyo/Desktop/dist; <span class="comment"># 这里是项目地址</span></span><br><span class="line">	index  index.html index.htm;</span><br><span class="line">	try_files <span class="variable">$uri</span> <span class="variable">$uri</span>/ /index.html; <span class="comment"># 这就是官网看到的那行配置</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 重启</span></span><br><span class="line">./nginx -s reload</span><br></pre></td></tr></table></figure>

<p><strong>成功!</strong></p>
<p><img src="https://gitee.com/liguoyou/pic/raw/master/images/image-20210909000133685.png" alt="成功界面"></p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>实际上这 <code>nginx</code> 属于后端配置的东西, 可以试试学习下也不错, 哪天遇到了不懂怎么配置的后端, 还可以装一下?</p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://juejin.cn/post/6926785971287490573" target="_blank" rel="noopener">【nginx】History模式的配置细节 - 掘金</a></p>
<p><a href="https://router.vuejs.org/zh/guide/essentials/history-mode.html" target="_blank" rel="noopener">HTML5 History 模式-官网</a></p>

                                                                        
                                    </div>
                                    <footer class="article-footer">
                                        <!-- 注释 - 分享按钮 -->
                                        <!-- <a data-url="http://liguoyou.gitee.io/your/2021/09/08/vue-router-history-nginx-setting/" data-id="cl0gvpjr3001em4ona7dt1b0g" class="article-share-link">
                                            分享
                                        </a> -->
                                        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/nginx/" rel="tag">nginx</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/your/tags/vue-router/" rel="tag">vue-router</a></li></ul>

                                    </footer>

    </div>

    
        
  <nav class="article-nav">
    
      <a href="/your/2022/03/07/on-add-to-favorites/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            使用 uniapp 开发微信小程序分享及收藏小程序功能
          
        </div>
      </a>
    
    
      <a href="/your/2021/09/05/weixin-slot-bug/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">微信小程序 slot 位置错乱导致样式布局无效的解决方案</div>
      </a>
    
  </nav>


            

                
                    
                        
  <div class="gitalk" id="gitalk-container"></div>
  <p style="color: #999; font-size: 12px; text-align: center;">
    第三方评论系统 -- Gitalk: 偶尔可能出现加载失败的情况, 您可以选择刷新或者前往 
    <a href="https://github.com/liguoyou/your/issues" target="_blank">issues</a>
    提交和查看评论
  </p>
  
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">

  
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

  
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

  <script type="text/javascript">
    var gitalk = new Gitalk({
      clientID: '2e731d2b04096a7c71ab',
      clientSecret: '41e2e15eb8edebd8efd5a6da558a44d60f33468a',
      repo: 'your',
      owner: 'liguoyou',
      admin: ['liguoyou'],
      // id: location.pathname,      // Ensure uniqueness and length less than 50
      id: md5(location.pathname),
      distractionFreeMode: false,  // Facebook-like distraction free mode
      pagerDirection: 'last'
    })

  gitalk.render('gitalk-container')
  </script>

                            

</article>
</section>
  <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
    <li><i class="fe fe-bookmark"></i> <span id="busuanzi_value_page_pv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2022 种子的信仰</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a href="https://github.com/zhwangart/hexo-theme-ocean" target="_blank" rel="noopener">Ocean</a></li>
    </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>
<nav class="navbar">
  
    <div class="logo">
      <a href="/your/"><img src="/your/images/logo.png" alt="种子的信仰"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/">首页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/archives">时间轴</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/categories">分类</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/tags">标签</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/your/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/your/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="请输入关键词...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>

<script src="/your/js/jquery-2.0.3.min.js"></script>


<script src="/your/js/jquery.justifiedGallery.min.js"></script>


<script src="/your/js/lazyload.min.js"></script>


<script src="/your/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/your/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/your/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
    });
  </script>


<script src="/your/js/ocean.js"></script>


</body>
</html>